<template>
	<view class="enroll-container">
		<!-- 顶部背景 -->
		<view class="header">
			<u-navbar
				title="用户注册"
				:autoBack="true"
				:bgColor="'transparent'"
				:titleStyle="{color: '#ffffff', fontSize: '18px', fontWeight: '500'}"
				leftIcon="arrow-left"
				:leftIconColor="'#ffffff'"
				:leftIconSize="20"
				:fixed="false"
				:placeholder="false"
			></u-navbar>
			<view class="header-bg"></view>
		</view>
		
		<!-- 注册表单卡片 -->
		<view class="form-card">
			<view class="avatar-section">
				<view class="avatar-wrapper" @click="chooseAvatar">
					<image v-if="formData.avatar" :src="formData.avatar" class="avatar-image" mode="aspectFill"></image>
					<view v-else class="avatar-placeholder">
						<u-icon name="camera-fill" size="30" color="#c0c4cc"></u-icon>
						<text class="upload-text">点击上传头像</text>
					</view>
				</view>
			</view>
			
			<u-form 
				:model="formData" 
				ref="uForm" 
				:errorType="'message'"
				labelPosition="left"
				labelWidth="80"
			>
				<u-form-item label="账号" prop="username" borderBottom>
					<u-input 
						v-model="formData.username"
						placeholder="请输入账号"
						border="none"
						fontSize="15px"
						:customStyle="{height: '48px'}"
					/>
				</u-form-item>
				
				<u-form-item label="姓名" prop="name" borderBottom>
					<u-input 
						v-model="formData.name"
						placeholder="请输入姓名"
						border="none"
						fontSize="15px"
						:customStyle="{height: '48px'}"
					/>
				</u-form-item>
				
				<u-form-item label="性别" prop="gender" borderBottom>
					<u-radio-group v-model="formData.gender" activeColor="#2979ff">
						<u-radio 
							:customStyle="{marginRight: '24px'}"
							v-for="(item, index) in genderList"
							:key="index"
							:label="item.label"
							:name="item.value"
							labelSize="15px"
						>
						</u-radio>
					</u-radio-group>
				</u-form-item>
				
				<u-form-item label="密码" prop="password" borderBottom>
					<u-input 
						v-model="formData.password"
						type="password"
						placeholder="请输入密码"
						border="none"
						fontSize="15px"
						:customStyle="{height: '48px'}"
					/>
				</u-form-item>
				
				<u-form-item label="确认密码" prop="confirmPassword" borderBottom>
					<u-input 
						v-model="formData.confirmPassword"
						type="password"
						placeholder="请再次输入密码"
						border="none"
						fontSize="15px"
						:customStyle="{height: '48px'}"
					/>
				</u-form-item>
				
				<u-form-item label="手机号" prop="phone" borderBottom>
					<u-input 
						v-model="formData.phone"
						placeholder="请输入手机号"
						border="none"
						type="number"
						maxlength="11"
						fontSize="15px"
						:customStyle="{height: '48px'}"
					/>
				</u-form-item>
				
				<u-form-item label="身份证" prop="idCard" borderBottom>
					<u-input 
						v-model="formData.idCard"
						placeholder="请输入身份证号"
						border="none"
						maxlength="18"
						fontSize="15px"
						:customStyle="{height: '48px'}"
					/>
				</u-form-item>
			</u-form>
			
			<!-- 注册按钮 -->
			<view class="btn-submit">
				<u-button type="primary" text="立即注册" :customStyle="btnStyle" @click="submit"></u-button>
				<view class="tips">
					注册即表示同意
					<text class="link">《用户协议》</text>
					和
					<text class="link">《隐私政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					avatar: '',
					username: '',
					name: '',
					gender: 'male',
					password: '',
					confirmPassword: '',
					phone: '',
					idCard: ''
				},
				genderList: [
					{
						label: '男',
						value: 'male'
					},
					{
						label: '女',
						value: 'female'
					}
				],
				btnStyle: {
					width: '85%',
					height: '48px',
					fontSize: '16px',
					margin: '8px 0',
					borderRadius: '24px',
					boxShadow: '0 4px 8px rgba(41, 121, 255, 0.2)'
				},
				rules: {
					username: [{
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					}],
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}],
					gender: [{
						required: true,
						message: '请选择性别',
						trigger: ['change']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}, {
						min: 6,
						message: '密码长度不能少于6位',
						trigger: ['blur', 'change']
					}],
					confirmPassword: [{
						required: true,
						message: '请再次输入密码',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							return value === this.formData.password
						},
						message: '两次输入的密码不一致',
						trigger: ['blur', 'change']
					}],
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}, {
						pattern: /^1[3-9]\d{9}$/,
						message: '手机号格式不正确',
						trigger: ['blur', 'change']
					}],
					idCard: [{
						required: true,
						message: '请输入身份证号',
						trigger: ['blur', 'change']
					}, {
						pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
						message: '身份证号格式不正确',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			//上传头像
			chooseAvatar() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.formData.avatar = res.tempFilePaths[0];
						console.log(this.formData.avatar,12312)
					}
				});
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (!this.formData.avatar) {
							uni.$u.toast('请上传头像');
							return;
						}
						console.log('验证通过', this.formData)
						// TODO: 实现注册逻辑
						uni.$u.toast('注册成功')
					} else {
						console.log('验证失败')
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.enroll-container {
	min-height: 100vh;
	background-color: #f8f9fc;
	position: relative;
	
	.header {
		position: relative;
		height: 200px;
		
		.header-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: linear-gradient(135deg, #2979ff, #5e7cff);
			border-radius: 0 0 30px 30px;
			box-shadow: 0 4px 20px rgba(41, 121, 255, 0.1);
		}
	}
	.form-card {
		position: relative;
		background-color: #ffffff;
		border-radius: 16px;
		margin: -120px 20px 20px;
		padding: 24px;
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
		
		.avatar-section {
			display: flex;
			justify-content: center;
			margin-bottom: 30px;
			
			.avatar-wrapper {
				width: 100px;
				height: 100px;
				border-radius: 50%;
				overflow: hidden;
				background-color: #f8f9fc;
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
				border: 2px solid #ffffff;
				
				.avatar-image {
					width: 100%;
					height: 100%;
				}
				
				.avatar-placeholder {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					
					.upload-text {
						font-size: 12px;
						color: #999;
						margin-top: 8px;
					}
				}
			}
		}
		
		::deep .u-form {
			.u-form-item {
				padding: 6px 0;
				margin-bottom: 8px;
				
				&__body {
					padding: 0;
				}
				
				&__body__left {
					margin-right: 10px;
					width: 85px !important;
					&__content {
						color: #666;
						font-size: 15px;
					}
				}
				
				&__body__right {
					flex: 1;
				}
			}
			
			.u-input {
				flex: 1;
			}
			
			.u-radio-group {
				flex: 1;
				display: flex;
				align-items: center;
				height: 48px;
			}
		}
		
		.btn-submit {
			margin-top: 40px;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.tips {
				margin-top: 16px;
				font-size: 12px;
				color: #999;
				
				.link {
					color: #2979ff;
				}
			}
		}
	}
}
</style>
